
<form [formGroup]="searchForm" nz-form class="ant-advanced-search-form">
  <div nz-row [nzGutter]="21">
    <div nz-col [nzSpan]="7" >
      <nz-form-item>
        <nz-form-label>旺旺名称</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="wangWangName"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="7" >
      <nz-form-item>
        <nz-form-label>订单号</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="orderNumberId"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="7" >
      <nz-form-item>
        <nz-form-label>做&nbsp;单&nbsp;人&nbsp;&nbsp;</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="person"/>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row [nzGutter]="21">
    <div nz-col [nzSpan]="14" >
      <nz-form-item>
        <nz-form-label>开始日期</nz-form-label>
        <nz-form-control>
<!--          <nz-date-picker [nzFormat]="'yyyy-MM-dd'" formControlName="gmtCrated"></nz-date-picker>-->
          <nz-range-picker [nzShowTime]="true" formControlName="gmtCrated"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="7" >
      <nz-form-item>
        <nz-form-label>选择店铺</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="shopId">
            <nz-option *ngFor="let item of shops" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row [nzGutter]="21">
    <div nz-col [nzSpan]="14" >
      <nz-form-item>
        <nz-form-label>员工账号</nz-form-label>
        <nz-form-control>
          <nz-select
            nzMode="multiple"
            nzPlaceHolder="请选择员工"
            formControlName="userIdList"
            nzAllowClear>
            <nz-option *ngFor="let o of users" [nzValue]="o.id" [nzLabel]="o.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="7" >
      <nz-form-item>
        <nz-form-label>订单状态</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="status">
            <nz-option nzValue="0" nzLabel="待审核"></nz-option>
            <nz-option nzValue="1" nzLabel="待付款"></nz-option>
            <nz-option nzValue="2" nzLabel="付款失败"></nz-option>
            <nz-option nzValue="3" nzLabel="付款成功"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

  </div>
  <div nz-row>
    <div nz-col [nzSpan]="24" class="search-area">
      <button nz-button [nzType]="'primary'" (click)="search()">搜索</button>
      <button nz-button (click)="resetSearchForm()">重置</button>
    </div>
  </div>
</form>

<!--<button nz-button nzType="primary" style="margin-right: 20px;margin-bottom: 10px" (click)="add()"><span nz-icon nzType="plus" nzTheme="outline"></span> 新增</button>-->

<button nz-button nzType="primary" (click)="export()"><span nz-icon nzType="arrow-down" nzTheme="outline"></span>导出</button>
<nz-table #basicTable
          [nzScroll]="{y: '540px',x: '1100px' }"
          [nzLoading]="loadingData"
          [nzFrontPagination]="false"
          [nzData]="listOfData">
  <thead>
  <tr>
    <th nzLeft nzWidth="100px">员工账号</th>
    <th nzLeft nzWidth="100px">姓名</th>
    <th nzWidth="100px">旺旺名</th>
    <th nzWidth="150px">订单号</th>
    <th nzWidth="150px">支付宝账号</th>
    <th nzWidth="120px">金额</th>
    <th nzWidth="80px">做单人</th>
    <th nzWidth="100px">图片</th>
    <th nzWidth="100px" *ngFor="let item of extend">{{item.filedName}}</th>
    <th nzWidth="100px">状态</th>
    <th nzWidth="200px">添加时间</th>
    <th nzRight nzWidth="100px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data">
    <td nzLeft>{{ data.numberName }}</td>
    <td nzLeft>{{ data.name }}</td>
    <td>{{ data.wangWangName }}</td>
    <td>{{ data.orderNumberId }}</td>
    <td>{{ data.alipay }}</td>
    <td>{{ data.money.toFixed(2) }}元</td>
    <td>{{ data.person }}</td>
    <td><a *ngIf="data.imgs.length > 0" (click)="showImageModalAction(data)">查看图片</a><a disabled *ngIf="data.imgs.length <= 0">无</a></td>
    <td *ngFor="let item of extend">
      {{getExtendValue(item,data)}}
    </td>
    <td><nz-tag [nzColor]="getStatusColor(data.status)">{{getStatus(data.status)}}</nz-tag></td>
    <td>{{ data.gmtCrated }}</td>
    <td nzRight style="padding-left: 5px;padding-right: 5px">
<!--      <a nz-button nzType="link" *ngIf="data.status == 0" nz-popconfirm-->
<!--         nzPopconfirmTitle="确定审核通过该数据?"-->
<!--         nzPopconfirmPlacement="top"-->
<!--         (nzOnConfirm)="examineData(data)">审核</a>-->
<!--      <a nz-button nzType="link" *ngIf="data.status == 1" (click)="pay(data)">付款</a>-->
<!--      <a nz-button nzType="link" *ngIf="data.status == 0" (click)="edit(data)">修改</a>-->
      <a nz-button nzType="link" *ngIf="data.status == 0 || data.status == -1 || data.status == 2"
         nzDanger
         nz-popconfirm
         nzPopconfirmTitle="是否删除该数据"
         nzPopconfirmPlacement="top"
         (nzOnConfirm)="deletedOrder(data)">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<div style="text-align: center">
  <nz-pagination [nzPageIndex]="page" [nzTotal]="total" [nzShowTotal]="totalTemplate" (nzPageIndexChange)="changePage($event)"></nz-pagination>
  <ng-template #totalTemplate let-total>共 {{ total }} 条数据</ng-template>
</div>

<nz-modal
  [nzMaskClosable]="false"
  [(nzVisible)]="showImageModal"
  nzTitle="订单图片"
  nzOkText="关闭"
  [nzCancelText]="null"
  (nzOnCancel)="hideImageModal()"
  (nzOnOk)="hideImageModal()"
  nzWidth="650px">
  <ng-container *nzModalContent>
    <div class="images">
      <div *ngFor="let item of images" class="item">
        <img [nzFallback]="fallback" nz-image [nzSrc]="item" />
      </div>
    </div>
  </ng-container>
</nz-modal>

<nz-modal
  [(nzVisible)]="showDetails"
  title="确认付款"
  nzOkText="去付款"
  [nzMaskClosable]="false"
  (nzOnCancel)="handlePayCancel()"
  (nzOnOk)="handlePay()"
  nzWidth="800px">
  <ng-container *nzModalContent>
    <nz-descriptions nzTitle="确认付款" *ngIf="data">
      <nz-descriptions-item nzTitle="姓名">{{data.name}}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="旺旺名">{{data.wangWangName}}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="订单号">{{data.orderNumberId}}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="支付宝账号">{{data.alipay}}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="金额">{{ data.money.toFixed(2) }}元</nz-descriptions-item>
      <nz-descriptions-item nzTitle="做单人">{{ data.person }}</nz-descriptions-item>
    </nz-descriptions>
  </ng-container>
</nz-modal>
<nz-modal
  nzTitle="新增订单"
  nzWidth="800px"
  [nzOkLoading]="okLoading"
  [(nzVisible)]="isVisible"
  [nzMaskClosable]="false"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm" (paste)="textareaPaste($event)">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="shopId" nzRequired>选择商铺</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择商铺">
          <nz-select formControlName="shopId" (ngModelChange)="changeShop($event)">
            <nz-option *ngFor="let item of shops" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入姓名">
          <input nz-input formControlName="name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="wangWangName">旺旺名</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入旺旺名">
          <input nz-input formControlName="wangWangName" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="orderNumberId" nzRequired>订单号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入订单号">
          <input nz-input formControlName="orderNumberId"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="money" nzRequired>金额</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入订单号">
          <input type="number" nz-input formControlName="money"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="alipay" nzRequired>支付宝账号</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入支付宝账号">
          <input nz-input formControlName="alipay" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="person" nzRequired>做单人</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入做单人">
          <input nz-input formControlName="person" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngFor="let item of extend">
        <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="item.id+''">{{item.filedName}}</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input [formControlName]="item.id+''" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="images" >图片</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-upload

            nzAccept=".jpg,.jpeg,.png"
            [nzAction]="uploadFileUrl"
            nzListType="picture-card"
            [(nzFileList)]="fileList"
            [nzPreview]="handlePreview">
            <div>
              <span nz-icon nzType="plus"></span>
              <div style="margin-top: 8px">上传图片</div>
            </div>
          </nz-upload>
          <nz-modal
            [nzVisible]="previewVisible"
            [nzContent]="modalContent"
            [nzFooter]="null"
            (nzOnCancel)="previewVisible = false">
            <ng-template #modalContent>
              <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
            </ng-template>
          </nz-modal>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
